<template>
	<view>
		<!-- 头部 -->
		<view class="mine-top" v-if="flag">
			<view class="ava" @tap="getUser">

				<open-data type="userAvatarUrl"></open-data>

			</view>
			<view class="name">
				<view class="username">
				{{userInfo.realname}}
				</view>
				<view class="usertel">
					用户名：{{userInfo.username}}
				</view>
			</view>
		</view>
		<view class="mine-top" v-if="flag==false">
			<view class="ava">
			
				<!-- <open-data type="userAvatarUrl"></open-data> -->
			
			</view>
			<view class="name">
				<view class="username">
					<!-- <open-data type="userNickName"></open-data> -->
					Hi~
				</view>
				<view class="usertel">
					您还没有登录呢
				</view>
				<view class="btns">
					
					<button type="default" class="first" @tap=gozhuce>注册</button>
					<button type="default" class="second" @tap=goLogin>登录</button>
				</view>
			</view>
		</view>
		<!-- 订单栏 -->
		<view class="order">
			<view class="my-order">
				我的订单
			</view>
			<view class="order-bar">
				<view class="order-item" v-for="(item,index) in orderBar" :key="index" @tap=getOrder(item.id)>
					<view class="icon">
						<image :src="item.imgs" mode=""></image>
					</view>
					<view class="text">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- 帮助中心 -->
		<view class="main">
			<view class="main-item" v-for="(item,index) in girdList" :key="index" @tap="get(index)">
				<view class="gird-item" >
					<view class="gird-img">
						<image :src="item.imgs" mode=""></image>
					</view>
					<view class="gird-text">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import{getUserInfo} from "../../utils/mine/index.js"
	import{findAllOrders} from "../../utils/goodsInfo/addCar/order/index.js"
	export default {
		data() {
			return {
				flag:false,
				userInfo:{},
				
				orderBar: [{
						imgs: '../../static/icons/icon-pay.png',
						name: "待付款",
						id:0
					},
					{
						imgs: '../../static/icons/pay-done.png',
						name: "已付款",
						id:1
					},
					{
						imgs: '../../static/icons/icon-car.png',
						name: "已发货",
						id:2
					},
					{
						imgs: '../../static/icons/icon-done.png',
						name: "已收货",
						id:3
					},
					{
						imgs: '../../static/icons/icon-back.png',
						name: "售后",
						id:9
					},
				],
				girdList:[{
					imgs:'../../static/icons/save.png',
					name:'商品收藏'
				},
				{
					imgs:'../../static/icons/brand.png',
					name:'品牌'
				},
				{
					imgs:'../../static/icons/article.png',
					name:'文章收藏'
				},
				{
					imgs:'../../static/icons/address.png',
					name:'地址'
				},
				{
					imgs:'../../static/icons/card.png',
					name:'卡包'
				},
				{
					imgs:'../../static/icons/cart2.png',
					name:'购物车'
				},
				{
					imgs:'../../static/icons/kf.png',
					name:'客服'
				},
				{
					imgs:'../../static/icons/kf.png',
					name:'测试'
				},
				{
					imgs:'../../static/icons/tel.png',
					name:'拨打电话'
				}
				]
			}
		},
		methods: {
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			gozhuce(){
				uni.navigateTo({
					url:'/pages/zhuce/zhuce'
				})
			},
			getUser(){
				uni.navigateTo({
					url:'/pages/mine/userInfo/userInfo'
				})
			},
			get(index){
				if(index==3){
				uni.navigateTo({
					url:"/pages/address/address"
				})
				}else if(index==5){
					uni.navigateTo({
						url:'/pages/cart/cart'
					})
				}
			},
			getOrder(id){
				// findAllOrders().then(res=>{
				// 	console.log(res)
				// })
				uni.navigateTo({
					url:"/pages/mine/orderInfo/orderInfo?type="+id
				})
				
			}
		},
		onLoad(){
			
		},
		onShow(){
			if(!uni.getStorageSync('token')){
				this.flag = false
				uni.showModal({
					title:"登录提示",
					content:"暂未登录，是否立即登录",
					success(res){
						if(res.confirm){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}else{
			        uni.showToast({
			            title: '您取消了',
			            icon:"none"
			          })
			    }
					}
				})
			}else{
				this.flag=true
				getUserInfo().then(res=>{
					console.log(res)
					this.userInfo=res.data.userInfo
					uni.setStorageSync("userList",res.data.userInfo)
				})
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.mine-top {
		display: flex;

		width: 90%;
		height: 75px;
		padding-top: 30px;
		margin: 0 auto;

		.ava {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background-color: #c8c7cc;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.name {
			width: 260rpx;
			height: 150rpx;
			display: flex;
			margin-left: 32rpx;

			color: #3d4c46;
			font-size: 14rpx;

			flex-direction: column;

			justify-content: space-around;
			box-sizing: border-box;
			padding: 7rpx 0;

			.username {
				font-size: 40rpx;
				font-weight: 600;
			}

			.usertel {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.order {
		width: 670rpx;
		height: 208rpx;
		border-radius: 4rpx;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 60rpx;

		.my-order {
			height: 76rpx;
			font-size: 26rpx;
			line-height: 76rpx;
			border-bottom: 2rpx solid #ddd;
			box-sizing: border-box;
			margin: 0 54rpx;
		}

		.order-bar {
			padding: 0 54rpx;
			box-sizing: border-box;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;

			.order-item {
				height: auto;
				width: auto;
				display: block;
				cursor: pointer;

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin: 0 auto;
					margin-top: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					font-size: 26rpx;
					line-height: 36rpx;
					text-align: center;
					margin-top: 10rpx;
				}

			}
		}
	}
	.main{
			width: 670rpx;
			margin: 0 auto;
		    margin-top: 60rpx;
		    background-color: #fff;
		    border-radius: 20rpx;
		    text-align: center;
		    padding: 30rpx 0 60rpx;
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    flex-wrap: wrap;
		.main-item{
				width: 33.33%;
			    min-height: 200rpx;
			    display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    align-items: center;
			    justify-content: center;
		.gird-img{
			width: 50rpx;
			height: 50rpx;
			margin: 30rpx auto;
		image{
			width: 100%;
			height: 100%;
		}
		}
		.gird-text{
			font-size: 26rpx;
		 line-height: 38rpx;
		}
		}
	}
	.btns{
		display: flex;
		justify-content: center;
		 align-items: center;
		 margin-top: 20rpx;
		 button{
			 font-size: 26rpx;
			 color: #fff;
			 border-radius: 15rpx;
			 border: 2rpx solid #354e44;
		 }
		 .first{
			 background-color: #F1ECE7;
			 color: #354e44;
		 }
		 .second{
			 background-color: #354e44;
			 color: #fff;
		 }
	}
</style>
